﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as acts from './actions'
import './statistic.css'
import DataList from './DataList'
import Chart from './chart/Chart'
import Sheet from './Sheet'
import { BAR, PIE } from './chart/chartTypes'
 

class Statistic extends Component {
    static propTypes = {
        dataset: PropTypes.array,
        currentData: PropTypes.object,
        chartName: PropTypes.string.isRequired,

        selectData: PropTypes.func.isRequired,
        selectRow: PropTypes.func.isRequired,
        clickCol: PropTypes.func.isRequired,
        setChart: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='stat-box'>
                <div className='stat-tree'>
                    <DataList
                        dataset={this.props.dataset}
                        currentData={this.props.currentData}                        
                        selectData={this.props.selectData} />
                </div>
                <div className='dv-panel'>
                    <div className='chart-panel'>
                        <div>
                            <button
                                onClick={() => this.props.setChart(PIE)}
                                className={this.props.chartName === PIE ? 'focused-btn' : ''}
                            >圈图</button>
                            <button
                                onClick={() => this.props.setChart(BAR)}
                                className={this.props.chartName === BAR ? 'focused-btn' : ''}
                            >柱状图</button>
                        </div>
                        <Chart
                            chartName={this.props.chartName}
                            data={this.props.currentData}
                        />
                    </div>
                    <div className='sheet-panel'>
                        <Sheet
                            data={this.props.currentData}
                            selectRow={this.props.selectRow}
                            clickCol={this.props.clickCol}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

const mapState2props = state => {
    var { currentData = null, chartName = 'bar', dataset = null } = state.statistic || {};
    return { currentData, chartName, dataset }
}
const mapDispatch2props = dispatch => ({
    selectData: data => dispatch(acts.selectData(data)),
    selectRow: row => dispatch(acts.selectRow(row)),
    clickCol: col => dispatch(acts.clickCol(col)),
    setChart: chart => dispatch(acts.setChart(chart))
});
export default connect(mapState2props, mapDispatch2props)(Statistic);